<template>
  <!-- 点到点任务最大盒子 -->
  <div class="arrange">
    <!-- 下拉菜单 -->
    <div class="origin">
      <van-dropdown-menu :overlay="false">
        <van-icon name="location-o" color="#1ed100" size="32"
          ><span>{{
            value1 === "" ? "选择充电点" : newonetext
          }}</span></van-icon
        >
        <van-dropdown-item
          @change="oneadd"
          v-model="value1"
          :options="location"
        />
      </van-dropdown-menu>
      <van-checkbox id="ads" v-model="checked">返回待命点</van-checkbox>
    </div>

    <!-- 按钮区域 -->
    <div class="button">
      <van-button @click="carryout" loading-size="36px" :loading="dingShow"
        >执行</van-button
      >
    </div>
  </div>
</template>

<script>
//导入yaml
import yaml from "js-yaml";
//导入执行任务接口请求
import { issueApi } from "@/api/assignment";
//导入获取库位点数据
import { gainApi } from "@/api/record";
export default {
  name: "Son",
  // 接收父组件中传入的值
  props: ["recharge", "newIndex", "newItem",'clickitem',"locationd"],
  data() {
    return {
      checked:false,
      // iscarryout: false, //控制执行区域显示和隐藏
      // button: true, //控制按钮显示和隐藏
      dingShow: false, //加载动画的显示和隐藏
      value1: "", //选中的下标状态
      location: [], //保存库位列表信息
      newonetext: "", //用来保存点击的这一项的id
      onetext: "选择点位", //默认给下拉菜单的文本
    };
  },
  watch: {
    clickitem(val) {
      console.log(val)
      if(val.type==3){
        this.value1 = val.id
        this.newonetext = val.id
      }
    }
  },
  methods: {
 //------------------------------------------点击选择点位的数据
    oneadd(e) {
      //筛选获取的数据中等于我点击的这一项
      let res = this.location.filter((item) => {
        return item.value == e;
      });
      // 把他的id追加到新的变量里面进行保存
      this.newonetext = res[0].text;
      console.log(this.newonetext);
    },
    // -------------------------------------------执行任务按钮
    async carryout() {
      this.dingShow = true; //把加载动画改为显示
      if(this.newonetext == ''){
        this.newonetext =0
      }
      let datas = 0;
      if(this.checked==false){
        datas = 0;
      }else{
        datas = 1;
      }
      setTimeout(async () => {
        try {
          //设置计时器
          let res = await issueApi({
            back_standby_point: datas, //是否返回待命点
            task_type: this.newIndex, //任务类型为父组件传过来的下标
            start_point_id: 0, //起点点id位置
            end_point_id: this.newonetext, //终点id位置
            start_column_id: 0, //列起点id
            end_column_id: 0, //列终点id
          });
          this.$toast.success("执行成功"); //提示用户
        } catch {
          this.$toast.fail("执行失败");
        }
        this.dingShow = false; //把加载状态改为隐藏
        //清空数据
          this.value1=''
      }, 1500);
    },

    //-----------------------------------------获取库位点的数据
    async getgion() {
      // // 发送请求获取数据
      // let res = await gainApi();
      // //把获取到的数据转换为yaml格式
     let newres =this.locationd;
      // //使用filter方法筛选出符合条件的点位
      let Arr = newres.filter((item) => {
        return item.type == 3; //判断数组中是否有点位瞒住2
      });
      //使用map进行映射修改id的键为text
      this.location = Arr.map((item, index) => {
        return {
          value: index, //把下标改为value为键名
          text: item.id, //把id的键名改为text
        };
      });
      this.onetext = this.location.text;
    },
  },

  created(){
    //一进入页面获取库位信息
    this.getgion()
  }
};
</script>

<style lang="less" scoped>
.arrange {
  display: flex;
  width: 100%;
  position: relative;
}

::v-deep .van-dropdown-menu__item {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 200px !important;
  cursor: pointer;
  background-color: skyblue !important;
  height: 20px !important;
}
.van-dropdown-menu {
  position: relative;
  // padding: 0 10px;
  margin-bottom: 20px;
  width: 240px !important;
  .van-icon {
    position: absolute;
    top: 5px;
    left: 20px;
    span {
        width: 80px;
        position: absolute;
        top: -8px;
        line-height: 50px;
        font-size: 16px;
        color: black;
        margin-left: 10px;
      }
  }
}
::v-deep .van-dropdown-menu__bar {
  position: relative;
  display: flex;
  height: 40px;
  background-color: skyblue;
  box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
}
::v-deep .van-dropdown-menu__title::after {
  position: absolute;
  top: 50%;
  right: 60px;
  margin-top: 5px;
  border: 3px solid;
  border-color: transparent transparent #dcdee0 #dcdee0;
  transform: rotate(-45deg);
  opacity: 0.8;
  content: "";
}
.button {
  margin-left: 5px;
  position: absolute;
  top: -17px;
  right: 10px;
  .van-button {
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    width: 65px;
    height: 42px;
    background-color: #3ab9bc;
  }
}

  ::v-deep .van-popup {
    width: 240px;
    height: 500px;
    margin-left: 704px;
    border: none !important;
    .van-button {
      position: fixed;
      left: 25%;
      width: 400px;
      height: 50px;
      border-radius: 20px;
      font-size: 22px;
    }
    .van-dropdown-item__content {
      position: absolute;
      max-height: 100%;
    }
  }#ads{
  /deep/ .van-checkbox__label{
    font-size: 22px!important;
    color: #fff!important;
  } 
  
}
</style>
